import Vue from "vue";
import VueRouter from "vue-router";
import store from "@/store";
const Home = () => import('@pages/Home')
const Login = () => import('@pages/Login')
const Search = () => import('@pages/Search')
const Register = () => import('@pages/Register')
const Detail = () => import('@pages/Detail')
const AddCartSuccess = () => import('@pages/AddCartSuccess')
const ShopCart = () => import('@pages/ShopCart')
const Center = () => import('@pages/Center')
const Pay = () => import('@pages/Pay')
const PaySuccess = () => import('@pages/PaySuccess')
const Trade = () => import('@pages/Trade')
const MyOrder = () => import('@pages/Center/MyOrder')
const TeamOrder = () => import('@pages/Center/TeamOrder')
// 对VueRouter型对象上的push进行重写
const lastPush = VueRouter.prototype.push
// 设置默认值避免多次点击搜索报错
VueRouter.prototype.push = function (
  location,
  onComplete = () => { },
  onAbort = () => { }
) {
  // 返回的值和原来push的一模一样,只是添加了一个默认值
  return lastPush.call(this, location, onComplete, onAbort)
}

Vue.use(VueRouter)
const router = new VueRouter({
  // 滚动行为
  scrollBehavior() {
    // return 期望滚动到哪个的位置
    return {
      x: 0,
      y: 0
    }
  },
  mode: 'history',
  routes: [
    { path: '/home', component: Home, name: 'home', meta: { isNav: true } },
    {
      path: '/login', component: Login, name: 'login', meta: { isShow: true },
      beforeEnter(to, from, next) {
        if (store.state.user.token) {
          next('/home')
        } else {
          next()
        }
      }
    },
    { path: '/search/:keyword?', component: Search, name: 'search' },
    { path: '/register', component: Register, name: 'register', meta: { isShow: true } },
    { path: '/detail/:skuId', component: Detail, name: 'detail' },
    {
      path: '/addCartSuccess', component: AddCartSuccess, name: 'addCartSuccess',
      beforeEnter(to, from, next) {
        if (sessionStorage.getItem("shopCarData")) {
          next()
        } else {
          next('/shopCart')
        }
      }
    },
    { path: '/shopCart', component: ShopCart, name: 'shopCart' },
    {
      path: '/center', component: Center, name: 'center', children: [
        { path: 'myOrder', component: MyOrder, name: 'myOrder' },
        { path: 'teamOrder', component: TeamOrder, name: 'teamOrder' },
        { path: '', component: MyOrder }
      ]
    },
    {
      path: '/pay', component: Pay, name: 'pay', beforeEnter(to, from, next) {
        if (from.path.startsWith("/shopCart")) {
          next()
        } else {
          next('/shopCart')
        }
      }
    },
    {
      path: '/paySuccess', component: PaySuccess, name: 'paySuccess', beforeEnter(to, from, next) {
        if (from.path.startsWith('/pay')) {
          next()
        } else {
          next('/shopCart')
        }
      }
    },
    {
      path: '/trade', component: Trade, name: 'trade', beforeEnter(to, from, next) {
        if (from.path.startsWith("/shopCart")) {
          next()
        } else {
          next('/shopCart')
        }
      }
    },
    { path: '/', redirect: '/home' },
  ]
})
// 全局前置路由守卫
router.beforeEach(async (to, from, next) => {
  // to:要去哪 from:打哪来 next:让你走哪 next()让你走to 写路径就去那
  // 先收集需要权限限制的组件路由
  const limitPath = ["/center", "/pay", "/paySuccess", "/trade"]
  // 再判断要去的路由有没有其中的
  const limit = limitPath.some(item => to.path.startsWith(item))
  // 获取用户名和token
  const token = store.state.user.token
  const nickName = store.state.user.nickName
  // 如果有用户名:想去哪去哪
  if (nickName) return next()
  // 如果要去的地方有权限限制
  if (limit) {
    // 如果你有token
    if (token) {
      try {
        await store.dispatch('user/getNickName')
        next()
      } catch (e) {
        next('/login')
      }
    } else {
      // 如果没有 那就只能请你去注册或登录了
      next('/login')
    }
  } else {
    // 如果没有限制且你有token 那就顺手帮你请求个用户名给你带上 方便后面判断无论有没有token都可以正常去没有校验
    if (token) {
      try {
        await store.dispatch('user/getNickName')
      } catch (e) {
        next('/login')
      }

    }
    next()
  }
})
export default router